<template>
  <div class="sidebar">
    <div class="logo"><img src="../assets/img/photo.jpg" />{{$store.state.setting.name}}</div>
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#212D4B"
      text-color="rgba(255, 255, 255, 0.66)"
      active-text-color="#fff"
      unique-opened
      router
    >
      <template v-for="item in routes">
        <el-menu-item
          :index="item.children[0].path"
          :key="item.index"
          v-if="item.children && item.children.length == 1"
          class="sidebarNav"
        >
          <i :class="['iconfont',item.children[0].meta.icon]"></i>
          <template #title>{{ item.children[0].meta.title }}</template>
        </el-menu-item>
        <el-submenu :index="item.index" :key="item.index" v-else>
          <template #title>
            <i :class="['iconfont',item.meta.icon]"></i>
            <span>{{ item.meta.title }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              v-for="chl in item.children"
              :key="chl.index"
              :index="chl.path"
              class="sidebarNav"
              v-show="!chl.hidden"
              >{{ chl.meta.title }}</el-menu-item
            >
          </el-menu-item-group>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  data() {
    return {
      items: []
    };
  },
  mounted(){
    console.log(this.routes,this.$route);
  },
  computed: {
    //右侧列表
    routes() {
      return this.$router.options.routes.filter((item:any)=> item.hidden!=true)
    },
    onRoutes() {
      // 根据路由name判断左侧导航选中
      let rName = this.$route.name;
      let rPath = "";
      for (let i = 0; i < this.routes.length; i++) {
        let item:any = this.routes[i];
        if (item.name == rName || item.children.length==1) {
          rPath = item.path;
        }else {
          for(let k = 0; k < item.children.length; k++) {
            if(item.children[k].name == rName ) {
              rPath = item.path+'/'+item.children[k].path;
            }
          }
        }
      }
      console.log(rPath)
      return rPath.substring(1);
    },
    collapse() {
      return this.$store.state.collapse;
    },
  },
});
</script>

<style scoped lang="scss">
li.sidebarNav.el-menu-item.is-active {
  background: #026be4 !important;
}
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
  bottom: 0;
  overflow-y: scroll;
  z-index: 1;
  width: 14%;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 100%;
  border: 0;
}
.sidebar > ul {
  height: 100%;
}
.el-menu-item [class^="el-icon-"] {
  position: relative;
  top: -2px;
}
.logo {
  background: rgb(33, 45, 75);
  color: #fff;
  font-size: 18px;
  height: 60px;
  line-height: 60px;
}
.logo img {
  width: 40px;
  height: 35px;
  float: left;
  margin: 10px 10px 0 20px;
  border-radius: 100%;
}
.sidebar-el-menu[data-v-7d622f5c]:not(.el-menu--collapse) {
  width: 100%;
}
.el-menu-item img {
  margin: -3px 9px 0 0;
}
.el-menu-item img.imgHOver,
.el-menu-item.is-active img {
  display: none;
}
.el-menu-item.is-active img.imgHOver {
  display: inline-block;
}
.el-submenu img.imgHOver,
.el-submenu.is-opened img {
  display: none;
}
.el-submenu.is-opened img.imgHOver {
  display: inline-block;
}
.el-submenu img {
  margin: 2px 9px 0 0;
}
.is-opened .el-submenu__title * {
  color: #fff !important;
}
.sidebar-el-menu {
  i.iconfont {
    margin-right:9px;
    font-size:14px;
  }
}
</style>
